<template>
<div class="tab">
  <div class="tab-item"
    :class="{'active': currMenus[index] && currMenus[index].active}"
    v-for="(item,index) in menus"
    v-on:click="onItemClick(item,index)"
    :key="'tab-item'+index">
    {{ item.text }}
  </div>
</div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    menus: Array
  },
  data() {
    return {
      currValue: this.value,
      currMenus: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.currMenus = this.menus.map(menu => {
        return {
          ...menu,
          active: menu.value === this.value
        };
      });
    },
    onItemClick(item, index) {
      this.currMenus.forEach(menu => {
        menu.active = false;
      });
      this.currMenus[index].active = true;
      this.$emit('input', item.value);
    }
  },
  watch: {
    value() {
      this.loadData();
    }
  }
};
</script>
<style lang="less" scoped>
.tab{
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 1px;
  .tab-item{
    flex: 1;
    .fc(13px, #999);
    text-align: center;
  }
  &.small-round{
    .rem1px(#e6e6e6, 2px);
    z-index: 0;
    height: 25px;/*no*/
    background-color: transparent;
    .tab-item{
      line-height: 25px;/*no*/
      .rem1pxR(#e6e6e6);
      &:last-child{
        &:after{
          height: 0;
          border-right-width: 0;
        }
      }
      &.active{
        color: @-color-primary;
        background-color: #f4f7ff;
      }
    }
  }
  &.round{
    // .rem1px(@-color-primary, 8px);
    // z-index: 0;
    border-radius: 4px;
    .tab-item{
      line-height: 30px;/*no*/
      .rem1pxR(@-color-primary);
      &:last-child{
        &:after{
          height: 0;
          border-right-width: 0;
        }
      }
      &:first-child{
        border-top-left-radius: 4px;/*no*/
        border-bottom-left-radius: 4px;/*no*/
      }
      &:last-child{
        border-top-right-radius: 4px;/*no*/
        border-bottom-right-radius: 4px;/*no*/
      }
      &.active{
        color: #fff;
        background-color: @-color-primary;
      }
    }
  }
}
</style>
